import { Modal } from 'antd';
import Cron from 'qnn-react-cron';
import { useState } from 'react';

import { ScheduleType } from './type';

import { ModalProps } from '#/entity';

export default function CronModal({ title, show, onOk, onCancel }: ModalProps<ScheduleType>) {
  const [value, setValue] = useState('');
  return (
    <Modal
      width={700}
      title={title}
      open={show}
      onOk={() => onOk(value)}
      onCancel={onCancel}
      okButtonProps={{ autoFocus: true, htmlType: 'submit' }}
      destroyOnClose
    >
      <Cron
        // value={formValue.value}
        getCronFns={(value) => {
          setValue(value.getValue());
        }}
        footer={false}
        panesShow={{
          second: true,
          minute: true,
          hour: true,
          day: true,
          month: true,
          week: true,
          year: true,
        }}
        defaultTab="second"
      />
    </Modal>
  );
}
